<template>
  <div class="cart-page">
    <!-- nav -->
    <nav-header :isShowHeadList="false"></nav-header>
    <div class="container">
      <!-- 购物车头部 -->
      <div class="cart-title"><h1>我的购物车</h1></div>
      <!-- 商品的展示 -->
      <div class="cart-list">
        <ul class="list-head">
          <li class="li-checkbox">
            <el-checkbox v-model="allChecked" @change="handlerAllChecked"
              >全选</el-checkbox
            >
          </li>
          <li class="li-goods">商品</li>
          <li class="li-price">价格</li>
          <li class="li-count">数量</li>
          <li class="li-sum">小计</li>
          <li class="li-delete">操作</li>
        </ul>
        <ul class="list-container" v-for="item in list" :key="item.id">
          <li class="li-checkbox">
            <el-checkbox
              v-model="item.checked"
              @change="handlerChecked()"
            ></el-checkbox>
          </li>
          <li class="li-goods">
            <div class="item-tmg">
              <img :src="item.s_good.s_goods_photos[0].path" alt="" />
              <span>{{ item.s_good.name }}</span>
            </div>
          </li>
          <li class="li-price">￥{{ item.s_good.price }}</li>
          <li class="li-count">
            <!-- {{ item.num }} -->
            <el-input-number
              size="mini"
              v-model="item.num"
              :min="1"
              :step="1"
              step-strictly
              @change="handleChange(item.id, item.num)"
            ></el-input-number>
          </li>
          <li class="li-sum">￥{{ item.s_good.price * item.num }}</li>
          <li class="li-delete">
            <span @click="delGoods(item.id)"
              ><i class="el-icon-delete"></i
            ></span>
          </li>
        </ul>
      </div>
    </div>
    <div class="sum-box">
      <div class="sum-box-left">
        <div class="box-tips">
          <div class="tubiao"><i class="el-icon-suitcase-1"></i></div>
          <div>
            <h4>
              购买即可获得价值支付金额1%的DJI币返利 - 购买越多，返利越多。
            </h4>
            <h5>了解更多优惠详情 ></h5>
          </div>
        </div>
        <div class="box-tips">
          <div class="tubiao"><i class="el-icon-sugar"></i></div>
          <div>
            <h4>有优惠券或者 DJI 币？</h4>
            <h5>您可以在结账的时候使用优惠券或者 DJI 币抵扣。</h5>
          </div>
        </div>
      </div>
      <div class="sum-box-right">
        <h1>
          {{ chooseSum.totalNum }}件商品总计（不包括运费）:¥{{
            chooseSum.totalPrice
          }}
        </h1>
        <h2>邮费:免费</h2>
        <h3>支持支付宝、微信、银联、银行转账、花呗、京东白条和招行分期</h3>
      </div>
    </div>
    <div class="btns">
      <router-link to="/index">
        <button class="left-btn">继续购物</button></router-link
      >

      <button class="right-btn" @click="goTOConfilrm">去结算</button>
    </div>
    <page-footer></page-footer>
  </div>
</template>

<script>
import NavHeader from "../components/homeComponent/NavHeader.vue";
import pageFooter from "../components/homeComponent/pageFooter.vue";
import { getCart, updateCart, deleteCart } from "@/assets/tool/request.js";
export default {
  components: {
    NavHeader: NavHeader,
    pageFooter: pageFooter,
  },
  data() {
    return {
      list: [],
      // checkBOX状态
      allChecked: true,
      //   checked: true,
      //   num1:1
    };
  },
  //   你选择了多少件商品和价格是动态显示,这个数据通过计算属性去实现
  computed: {
    chooseSum() {
      //   首先先过滤选择的项目
      let chooseList = this.list.filter((ele) => ele.checked);
      let totalNum = chooseList.reduce((sum, ele) => (sum += ele.num), 0); //选中产品总数
      let totalPrice = chooseList.reduce(
        //计算总额
        (sum, ele) => (sum += ele.s_good.price * ele.num),
        0
      );
      return { totalNum, totalPrice };
    },
  },
  methods: {
    //   改变数量
    async handleChange(id, num) {
      //   console.log(num);
      await updateCart(id, {
        num,
      });
    },
    delGoods(id) {
      // 首先先触发一个弹窗确认再删除,主要要到main，挂载vue原型
      // 这点击的时候先弹出弹框然后再操作
      this.$confirm("确定删除商品?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          this.$message({
            //   这里是成功触发的回调这里是需要发送请求删除改商品，但是还是要重新去渲染,注意自定义的checked还要重新赋值
            type: "success",
            message: "删除成功!",
          });
          await deleteCart(id);
          let res = await getCart({
            projiect_id: 104,
          });
          this.list = res.data.result;
          this.list.forEach((ele) => {
            this.$set(ele, "checked", true); //注意的是要数据更新后显示要用set
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 这里是通过ele的change监听事件，改变属性后发生的操作，注意的是里面的checked的已经通过v-model动态改变
    handlerChecked() {
      //   点击之后可以判断list.checked里面的属性是否都为true去控制allchecked,可以通过数组方法去判断
      this.allChecked = this.list.every((ele) => ele.checked);
    },
    // 处理点击后全选的方法
    handlerAllChecked() {
      this.list.forEach((ele) => {
        ele.checked = this.allChecked;
      });
    },
    // 页面跳转和数据传递
    goTOConfilrm() {
      let chooseListJson = JSON.stringify(
        this.list.filter((ele) => ele.checked)
      );
      sessionStorage.setItem("chooseList", chooseListJson);  //将数据传给订单页面
      this.$router.push('/confilrm')
    },
  },
  async created() {
    let res = await getCart({
      projiect_id: 104,
    });
    this.list = res.data.result;
    // 后台请求回来的数据并还没有关于是否选中的选项，所以我们前端就动态添加
    //但是动态你动态添加新属性到某个变量的时候我们要用vue.$set()否则无法更新
    this.list.forEach((ele) => {
      this.$set(ele, "checked", true);
    });
    // console.log(this.list);
  },
};
</script>

<style lang="scss" scoped>
html {
  min-height: 100vh !important;
}
.container {
  width: 1200px;
  margin: 50px auto 0;
  border-bottom: 1px solid #ddd;
  .cart-title {
    font-size: 32px;
    line-height: 48px;
    font-weight: normal;
  }
  .cart-list {
    margin-top: 50px;
  }
  .list-head {
    font-size: 14px;
    line-height: 20px;
    border-bottom: 1px solid #ddd;
    // padding: 20px 0;
  }
  ul {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    .li-checkbox,
    .li-price,
    .li-count,
    .li-sum,
    .li-delete {
      flex: 1;
    }
    .li-goods {
      text-align: left;
      flex: 5;
      img {
        width: 100px;
      }
    }
    .li-checkbox {
      flex: 0.5;
      text-align: left;
    }
    .li-delete {
      span {
        &:hover {
          cursor: pointer;
        }
      }
    }
  }
}
.sum-box {
  height: 104px;
  padding: 30px 0;
  width: 1200px;
  margin: 10px auto 0;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ddd;
}
.sum-box-left,
.sum-box-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.box-tips {
  display: flex;
  .tubiao {
    margin-right: 20px;
  }
  h4 {
    font-size: 14px;
  }
  h5 {
    margin-top: 5px;
    font-size: 12px;
    line-height: 18px;
  }
}

.sum-box-right {
  font-size: 14px;
  text-align: right;
  h1 {
    font-size: 24px;
    line-height: 32px;
  }
}
.btns {
  height: 48px;
  padding: 20px 0;
  width: 1200px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
  button {
    width: 276px;
    height: 100%;
    border-radius: 5px;
    font-size: 16px;
  }
  .left-btn {
    background-color: #fff;
    border: 1px solid rgb(212, 215, 217);
    &:hover {
      border-color: #1897f2;
      color: #1897f2;
    }
  }
  .right-btn {
    color: #fff;
    background-image: linear-gradient(0deg, #1897f2, #42b7ff);
    &:hover {
      background-image: linear-gradient(0deg, #42b7ff, #6bcbff);
    }
  }
}
</style>